<template>
  <div>
    <!-- 导航 -->
    <div class="nav w100">
      <div class="w1230 auto h40 flex between nav_center">
        <div class="flex nav_center_left h40 fs12 between">
            <div>小米官网</div>
            <div>小米商城</div>
            <div>MIUI</div>
            <div>loT</div>
            <div>云服务</div>
            <div>天星数科</div>
            <div>有品</div>
            <div>小爱开放平台</div>
            <div>资质证照</div>
            <div>协议规则</div>
            <div>下载app</div>
            <div>Select Location</div>
        </div>
        <div class="flex nav_center_right between fs12 text-center">
          <div>请登录</div>
          <div>消息通知</div>
          <div>我的订单</div>
          <div :style="{'background': shoppingCartNum ==0 ? '#999' : '#ff6700'}">购物车（{{shoppingCartNum}}）</div>
          <!-- 
            给 div设置样式 可以用 style

            style需要设置成动态的  style前面加个:  就可以动态设置了

            <div :style=""></div>

            要设置背景颜色
            <div :style="{'backround': 要设置的值}"></div>

            <div :style="{'backround': 'red'}"></div>
            <div :style="{'backround': 'blue'}"></div>


            要设置的值 有两个  

            三目运算符   a?b:c   如果a是true  取b的值   a是false  取c的值
            shoppingCartNum == 0 ? 灰色 : 橙色


             <div :style="{'backround': shoppingCartNum == 0 ? 灰色 : 橙色}"></div>
             <div :style="{'backround': shoppingCartNum == 0 ? '#999' : '#ff6700'}"></div>
           -->
        </div>
      </div>
    </div>

    <!-- 菜单 -->
    <Menu></Menu>

    <!-- 标题 -->
    <div class="title-box">
      <div class="w1230 auto flex between title">
        <div>
          <span class="fs18">Redmi Note 13 Pro</span>
          <span class="fs13 c-ccc ml20 mr20">|</span>
          <span class="fs13 c-666">Redmi Note 12 Pro</span>
        </div>
        <div>右边</div>
      </div>
    </div>

    <!-- 主体 -->
    <div class="w1230 auto flex between main mt30">
      <div>左轮播</div>
      <div>
        <div class="fs22">{{ phoneData.title }}</div>
        <div class="mt15 mb15 fs13">
          <span class="textColor">至高优惠{{ phoneData.prePrice }}元</span>
          <span class="c-999">{{ phoneData.desc }}</span>
        </div>
        <div class="fs13 textColor mb15" v-if="phoneData.isSelfSupport">小米自营</div>
        <div>
          <span class="textColor fs16">{{ phoneData.currentPrice }}元</span>
          <span class="line-del fs13 c-999 ml10">{{ phoneData.originalPrice }}元</span>
        </div>
        <hr color="#eee" class="mt15 mb15"/>
        <Option @change="change" :data="phoneData.version"></Option>
        <Option @change="colorChange" :data="phoneData.color"></Option>

        <!-- 结算的地方 -->
        <div class="computed">
          <div class="fs14 c-666 flex between">
            <span>
              {{ phoneData.title }}
              {{ phoneData.defaultData.version.text }}
              {{ phoneData.defaultData.color.text }}

            </span>
            <p>{{ phoneData.defaultData.price.current }}元 
              <span v-if="phoneData.defaultData.price.original" class="line-del">{{ phoneData.defaultData.price.original }}元 </span> </p>
            
          </div>
        </div>
        <!-- 加入购物车按钮 -->
        <div class="shoppingCart mt20">
          <!-- <button class="fs18">加入购物车</button> -->
          <router-link class="fs18" to="/addShopping" tag="button">加入购物车</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from '@/components/home/com-menu.vue'
import Option from '@/components/goods/com-options.vue'
import axios from 'axios'
export default {
  data () {
    return {
      shoppingCartNum: 2,
      phoneData: {}
    }
  },
  components: {
    Menu,
    Option
  },
  methods: {
    change (item) {
      this.phoneData.defaultData.version = item
      this.phoneData.defaultData.price = {
        current: item.price
      }
    },
    colorChange (item) {
      this.phoneData.defaultData.color = item
    },
    getData () {
      console.log(this.$route.query.id)
      axios.get('/api/phone?id=' + this.$route.query.id).then(({data}) => {
        // console.log(data[0])
        this.phoneData = data[0]
      })
    }
  },
  mounted () {
    this.getData() // 获取数据
  }
}
</script>

<style lang="less" scoped>

.shoppingCart{
  button{
    width: 50%;
    height: 60px;
    background: #ff6700;
    color: #fff;
    border: none;

  }
}

.computed{
  background: #f5f5fa;
  padding: 40px 30px;
}
.nav{
  height: 40px;
  background: #333;
  .nav_center{
    color: #e5e5e5;
    .nav_center_left{
      width: 750px;
      line-height: 40px;
    }
    .nav_center_right{
      line-height: 40px;
      width:400px;
      div{
        width: 100px;
      }
    }
  }
}
.title-box{
  border-top: 1px solid #ddd;
  height: 70px;
  line-height: 70px;
  box-shadow: 0px 2px 5px #ddd;
  // background: red;
}
.main{
  &>div{
    width: 50%;
  }
}
</style>